<template>
    <div class="menu-dir" >        
        <!-- <div class="menutit-box" v-if="props.item.REMARK=='目录'" @click="toggleSubIsShow"> -->
        <div class="menutit-box" v-if="props.item.CUST_TYPE === 1" @click="toggleSubIsShow">
            <el-icon class="menu-icon">
                <component :is="props.item.ICON"/>
            </el-icon>
            <div class="mdtit" >{{props.item.TITLE}}</div>
            <el-icon class="menu-icon" :class="{down:isDown}"><CaretLeft /></el-icon>
        </div>        
        <!-- <div class="menuLink" v-if="props.item.REMARK=='链接'"> -->
        <div class="menuLink" v-if="props.item.CUST_TYPE === 0">
            <el-icon class="menu-icon">
                 <component :is="props.item.ICON"/>
            </el-icon>
            <span class="router-link" @click="clickLink(props.item.PATH,props.item)">{{props.item.TITLE}}</span>
        </div>
        <!-- 组件自调用实现递归 -->
        <el-collapse-transition>
            <div v-if="subIsShow">
                <MenuList v-for="(v,j) in props.item.nextLev" :key="j" :item="v" />
                <!-- <MenuList v-for="(v,j) in props.item.nextLev" :key="j" :item="v" class="sub" :class="{show:subIsShow}"/> -->
            </div>
        </el-collapse-transition>
    </div>
</template>

<script setup>
// import {  Document,  Folder} from '@element-plus/icons-vue'
import { ref, defineProps } from 'vue'
import { mainStore } from '@/stores/store'
import {useRouter} from 'vue-router'
import {isCollectFunc} from '@/utils/isCollect'

const useStore = mainStore()
const router = useRouter()
// const route = useRoute()

//接收父组件传递的数据
const props = defineProps({
    item: {
        type: Object
    }
})

//子目录展开/折叠
let isDown = ref(false)
let subIsShow = ref(false)
let toggleSubIsShow = ()=>{
    isDown.value = !isDown.value
    subIsShow.value = !subIsShow.value 
}
let isCollect = ref(false) //用户是否对其有进行收藏

//点击链接打开页面
const clickLink = (path,item)=>{
    // console.log(useStore.activePath);  
    useStore.setActivePath(path)
    // console.log(useStore.activePath);  
    isCollect.value = isCollectFunc(path,useStore.userCollect)
    useStore.setUcStatus(isCollect.value)    
    useStore.addSubTabList(item)    
    useStore.toggleHomeShow(path)  
    router.push(path)
}

</script>

<style lang="less" scoped>
.menu-dir{
    // height: 5%;
    width: 100%;  
    // .sub{        
        // padding-left: .3125rem;
        // display: none; 
        // animation: slideDownMenu 0.5s ease forwards;    
        // transition:all 0.3s;
        // -moz-transition:all 0.3s; /* Firefox 4 */
        // -webkit-transition:all 0.3s; /* Safari and Chrome */
        // -o-transition:all 0.3s; /* Opera */
        // visibility: hidden;
        // opacity: 0;
    // }  
    // .sub.show{
        // display: block;
        // animation: slideDownMenu 0.3s ease forwards;
        // visibility: visible;
        // opacity: 1       
    // }          
    .menutit-box{
        height: 2.5rem;
        width: 100%;
        padding-left:.3125rem;
        display: flex;
        align-items: center;
        .menu-icon{
            width: 10%;
            color: var(--bgColorBlue);
            margin-right: .3125rem; 
            font-size: .875rem;                       
        }
        .mdtit{
            width: 90%;
            font-size: .875rem;
            color: var(--bgColorBlue);
            text-decoration: none;
            white-space:nowrap; 
        }
        .down{
            transform: rotate(-90deg);            
        }
    }
    .menutit-box:hover{
        background-color:rgba(95, 105, 116, 0.1) ;
        cursor: pointer;
        // .menu-icon{
        //     color: #fff;                        
        // }
        // .mdtit{
        //     color: #fff;
        // }
    }
    
    .menuLink{
        height: 2.5rem;
        width: 100%;
        padding-left:.3125rem;
        display: flex;
        align-items: center;
        justify-content:flex-start;  
        background-color: rgba(68, 146, 224,.3);                      
        .menu-icon{
            width: 10%;
            color: var(--bgColorBlue);
            // margin-right: .3125rem; 
            // padding-right:.3125rem;  ; 
            font-size: .875rem;                      
        }
        .router-link{
            width: 90%;
            font-size: .875rem;
            color: var(--bgColorBlue);
            text-decoration: none;
            white-space:nowrap;   
        }
    }
    .menuLink:hover{
        background-color:rgba(95, 105, 116, 0.1) ;
        cursor: pointer;
        // .menu-icon{
        //     color: #fff;
        // }
        // .router-link{
        //     color: #fff;
        // }
    }             
} 

/* 定义一个简单的下拉菜单动画 */
@keyframes slideDownMenu {
    from {
        opacity: 0;
        transform: translateY(-40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

</style>